<template>
  <div>
    <el-row>
      <el-col :span="6" class="title">推荐作者</el-col>
      <el-col :span="6" :offset="12" class="change-list">
        <a href="javascript:void(0)" @click="changeList" class="change-list-a"><i class="el-icon-refresh"></i>&nbsp;换一批</a>
        </el-col>
    </el-row>

    <el-row class="row-content" v-for="content in contents" :key="content.username">
        <el-col :span="5">
          <img :src="content.img" height="47" width="47" class="avatar"/>
        </el-col>
      
      <el-col :span="19">
          <el-row>
            <el-col :span="18" class="username">
              <a href="javascript:void(0)" @click="checkAuth(content.username)" style="color: #333333; text-decoration:none">{{content.username}}</a>
            </el-col>
            <el-col :span="6" class="follow"><a href="javascript:void(0)" @click="followAuth(content.username)">+关注</a></el-col>
          </el-row>
          <el-row>
            <el-col class="desc">{{content.desc}}</el-col>
          </el-row>
        </el-col>

    </el-row>

    <el-row class="row-check-all">
      <el-button round @click="checkAll">查看全部</el-button>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Recommend",
    data() {
      return {
        contents: [
          {
            img: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/avatars/7bfdd41d-7cc5-4bc0-a922-2e0180391320.png',
            username: "作者的名字",
            desc: '写了764.5k字 · 44k喜欢'
          },
          {
            img: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/avatars/7c28763e-002b-4e89-8dea-5b8da210ef2c.jpg',
            username: "名贵的考拉熊",
            desc: '写了764.5k字 · 44k喜欢'
          },
          {
            img: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/avatars/7c512474-3865-4c39-b4f2-d0a830174e62.jpg',
            username: "三叶秋",
            desc: '写了764.5k字 · 44k喜欢'
          },
        ],
      }
    },
    methods: {
      changeList() {
        alert('刷新名单');
      },
      followAuth(auth) {
        alert('已关注:'+auth)
      },
      checkAll() {
        alert('查看全部作者');
      },
      checkAuth(auth) {
        alert('即将查看作者:'+auth);
      }
    }
  }
</script>

<style scoped lang="less">

  .title {
    font-size: 14px;
    color: #969696;
  }
  .change-list {
    color: #969696;
    font-size: 14px;
  }
  .change-list-a {
    color: #969696;
    text-decoration:none;

  }

  .avatar {
    border: 1px solid #e6e6e6;
    border-radius: 50%;
  }

  .username{
    font-size: 14px;
    color: #333333;
  }
  .follow{
    font-size: 13px;

    >a {
      color: #ea6f5a;
      text-decoration:none;
    }
  }

  .desc{
    margin-top: 5px;
    font-size: 12px;
    color: #969696;
  }

  .row-content {
    margin-top: 15px;
  }

  .row-check-all {
    margin-top: 20px;
    text-align:center;

  }
</style>